<template>
  <div class='operate'>
    <div class='scrollView'>
      <field
        v-model="name"
				maxLength="20"
        clearable
        :required="true"
        label="姓名"
        :placeholder="'请输入姓名'"
      />
      <field
        v-model="phone"
				maxLength="11"
        clearable
        :required="true"
        label="手机号"
        :placeholder="'请输入手机号'"
      />
    </div>
    <div class='operate_submit' @click="submit">保存</div>
  </div>
</template>

<script>
	import field from '../field/index.vue'
	export default {
		components: {
			field
		},
		data() {
			return {
				name: '',
				phone: ''
			}
		},
		methods: {
			submit() {
				if(this.name === '') {
					uni.showToast({
						title: '姓名不能为空！',
						icon: 'none'
					})
					return
				}
				if(this.phone === '') {
					uni.showToast({
						title: '手机号不能为空！',
						icon: 'none'
					})
					return
				}
				this.http.POST({
					name: 'adduser',
					params: {
						name: this.name,
						phone: this.phone
					}
				}).then(res => {
					if(res.result === 'success') {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		},
	}
</script>

<style>
	.required_formItem:before{
	  content: '*';
	  color: #FA4943;
	}
	.operate {
	  width: 750rpx;
	  height: 100vh;
	  font-size: 28rpx;
	  position: relative;
	  border-top: 1rpx solid #ebedf0;
	}
	.scrollView {
	  background: #FFFFFF;
	  width: 100%;
	  height: 100vh;
	  overflow-x: hidden;
	}
	.scrollView::-webkit-scrollbar {
	  display: none;
	}
	.operate_submit {
	  position: fixed;
	  bottom: 0rpx;
	  width: 100%;
	  padding: 20rpx;
	  text-align: center;
	  z-index: 10;
	  background: #FA4943;
	  color: #FFFFFF;
	}
	.arrow {
	  width: 30rpx;
	  height: 30rpx;
	  margin-left: 10rpx;
	}
	.container {
	  width: 100%;
	  background: #FFFFFF;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  border-bottom: 1rpx solid #ebedf0;
	  box-sizing: border-box;
	  padding: 20rpx 40rpx 20rpx 10rpx;
	  margin-left: 20rpx;
	  text-align: right;
	  height:auto;
	  flex-direction:row;
	}
	.container_right {
	  display: flex;
	  align-items: center;
	}
	.placeholder {
	  color: #999999
	}
</style>
